<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table :data="tableData"
                  style="width: 100%; margin-top: 20px"
                  :header-cell-style="{ background: '#eee' }"
                  height="550px">
          <el-table-column type="index"
                           width="100"
                           label="序号"
                           align="center">
          </el-table-column>
          <el-table-column v-for="(item,ind) in tableHeaderArr"
                           :prop="item.prop"
                           :width="item.label=='电梯速度（m/s）'?140:'auto'"
                           :label="item.label"
                           :key="ind"
                           align="center">
          </el-table-column>
        </el-table>
        <div class="pagination-style">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="requstParam.pageNum"
                         :page-size="requstParam.pageSize"
                         :page-sizes="[10, 20, 30, 40]"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { constructionLiftApi } from "@/services/WorkCenter";
export default {
  props: {
    requestParams: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isRefresh: {
      type: Number,
      default: () => {
        return 0
      }
    }
  },
  data () {
    return {
      tableHeaderArr: [
        { prop: 'deviceName', label: '设备名称' },
        { prop: 'deviceNo', label: '设备编号' },
        { prop: 'door1', label: '门1状态' },
        { prop: 'door2', label: '门2状态' },
        { prop: 'skyLight', label: '天窗状态' },
        { prop: 'fallingProtector', label: '防坠器状态' },
        { prop: 'dip1_percentage', label: 'X轴倾斜角' },
        { prop: 'dip2_percentage', label: 'Y轴倾斜角' },
        { prop: 'windSpeed', label: '风速（m/s）' },
        { prop: 'speed', label: '电梯速度（m/s）' },
        { prop: 'braking', label: '制动状态' },
        { prop: 'warn', label: '报警状态' },
        { prop: 'datetime', label: '时间' }
      ],//表头
      requstParam: {
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0
    }
  },
  methods: {
    getObjParams () {//获取传参
      let objParams = {
        ...this.requestParams,
        ...this.requstParam
      };
      return objParams;
    },
    getEleStateData () {//升降机设备状态数据     
      constructionLiftApi.eleStateData({
        params: this.getObjParams()//获取传参
      }).then((res) => {
        if (res.code == 0) {
          let list = res.data.list || [];
          this.tableData = list;
          this.total = res.data.total_count || 0;
          this.$emit('update:isRefresh', 0);
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    handleSizeChange (val) {
      this.requstParam.pageSize = val;
      this.handleCurrentChange(1);
    },
    handleCurrentChange (val) {
      this.requstParam.pageNum = val;
      this.getEleStateData();//升降机设备状态数据  
    }
  },
  watch: {//监听
    isRefresh (n, o) {
      if (n == 1) {
        this.handleCurrentChange(1);//刷新
      }
    }
  },
  created () {
    this.handleCurrentChange(1);//刷新
  }
}
</script>

<style lang="scss" scoped>
.pagination-style {
  margin-top: 20px;
  text-align: center;
}
</style>